<template>
    <div>
        <Modal v-model="isShowModal" title="用户资金记录" @on-cancel="hide" :mask-closable="false" width="1300">


            <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :loading="isTableLoading">
                <template slot-scope="{ row, index }" slot="capitalType">
                    <Tag color="green" v-if="row.capitalType == 1" size="default">余额</Tag>
                    <Tag color="volcano" v-if="row.capitalType == 2" size="default">知豆</Tag>
                </template>
                <template slot-scope="{ row, index }" slot="changeType">
                    <span v-if="row.changeType == 12">平台减少</span>
                    <span v-if="row.changeType == 13">平台增加</span>
                </template>
                <template slot-scope="{ row, index }" slot="changeAmount">
                    <span v-if="row.changeType == 12">-</span>
                    <span v-if="row.changeType == 13">+</span>
                    {{row.changeAmount}}
                </template>

            </Table>
            <!--分页-->
            <div class="hs-page">
                <Page :total="total" show-sizer show-total transfer @on-change="changePage"
                      @on-page-size-change="changePageSize"/>
            </div>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide">取消</Button>
                <Button type="primary" @click="hide">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                total: 0,
                isTableLoading: false,
                isShowModal: false,
                params: {
                    page: 1,
                    rows: 10,
                    capitalType: ''
                },
                // 表格列
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        minWidth: 120,
                        key: 'userCapitalRecordId'
                    },
                    {
                        title: '昵称',
                        minWidth: 150,
                        key: 'nickName'
                    },
                    {
                        title: '账号',
                        minWidth: 120,
                        key: 'username'
                    },
                    {
                        title: '资金类型',
                        minWidth: 120,
                        slot: 'capitalType'
                    },
                    {
                        title: '变动类型',
                        minWidth: 120,
                        slot: 'changeType'
                    },
                    {
                        title: '修改金额',
                        minWidth: 120,
                        slot: 'changeAmount'
                    },
                    {
                        title: '变动后金额',
                        minWidth: 120,
                        key: 'afterAmount'
                    },
                    {
                        title: '变动描述',
                        key: 'title',
                        minWidth: 180
                    },
                    {
                        title: '操作人',
                        minWidth: 120,
                        key: 'adminName'
                    },
                ],
                // 表格数据
                data: [],
            }
        },
        methods: {
            // 用户资金记录查询（运营修改）
            findAllUserCapital() {
                this.isTableLoading = true;
                this.axios.post('/user/findAllUserCapital', this.params).then(res => {
                    console.log(res);
                    this.isTableLoading = false;
                    if (res.status == 200) {
                        this.total = res.data.total;
                        this.data = res.data.rows;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询用户资金记录列表接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 显示模态框
            show() {
                this.isShowModal = true;
                // 用户资金设置-用户资金记录查询
                this.findAllUserCapital();
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            },
            // 改变页数
            changePage(e) {
                this.params.page = e;
                // 用户资金设置-用户资金记录查询
                this.findAllUserCapital();
            },
            // 改变页容量
            changePageSize(e) {
                this.params.rows = e;
                // 用户资金设置-用户资金记录查询
                this.findAllUserCapital();
            }
        }
    }
</script>

<style scoped>

</style>